<%@page import="com.xingxue.util.Page"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>基本的分页查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active { background-color: #5bb75b;}
      .pagination ul > .active > a, .pagination ul > .active > span { color: #ffffff;}
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>
	<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>          
          <a class="brand" href="#">基本的员工搜索</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <c:url value="/" var="url"></c:url>
              <li class="active"><a href="${url}">首页</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container">
    <table class="table">
      <thead>
      	<tr>
      		<th>编号</th>
      		<th>姓名</th>
      		<th>职位</th>
      		<th>上级</th>
      		<th>入职日期</th>
      		<th>工资</th>
      		<th>佣金</th>
      		<th>部门</th>      		
      	</tr>
      </thead>
      <tbody>
      <c:forEach items="${p.rows}" var="e">
      	<tr>
      		<td>${e.empno}</td>
      		<td>${e.ename}</td>
      		<td>${e.job}</td>
      		<td>${e.mgr}</td>
      		<td><fmt:formatDate value="${e.hiredate}" pattern="yyyy-MM-dd"/></td>
      		<td><fmt:formatNumber value="${e.sal}" type="currency"/></td>
      		<td><fmt:formatNumber value="${e.comm}" type="currency"/></td>
      		<td>${e.deptno}</td>
      	</tr>
      </c:forEach>
      </tbody>
    </table>
	
	
	
	<div class="pagination">
	  <ul>
	  	<!-- 首页和上一页 -->
	  	<c:if test="${p.page>1}">
	  		<c:url value="/search1" var="url"><c:param name="page" value="1"/><c:param name="pageSize" value="${p.pageSize}"/></c:url>
	  		<li><a href="${url}">|&lt;</a></li>
	  		<c:url value="/search1" var="url"><c:param name="page" value="${p.page-1}"/><c:param name="pageSize" value="${p.pageSize}"/></c:url>
	  		<li><a href="${url}">&lt;</a></li>
	  	</c:if>
	  	<c:if test="${p.page<=1}">
	  		<li class="disabled"><a href="javascript:void(0)">|&lt;</a></li>
	  		<li class="disabled"><a href="javascript:void(0)">&lt;</a></li>
	  	</c:if>
	  	
	  	<!-- 中间页码 -->
	  	<c:forEach begin="${p.pageBegin}" end="${p.pageEnd}" var="i">	  	
	  	<c:if test="${p.page==i}">
	  		<li class="active"><a href="javascript:void(0)">${i}</a></li>
	  	</c:if>
	  	<c:if test="${p.page!=i}">
	  		<c:url value="/search1" var="url"><c:param name="page" value="${i}"/><c:param name="pageSize" value="${p.pageSize}"/></c:url>
	  		<li><a href="${url}">${i}</a></li>
	  	</c:if>	
	  	</c:forEach>
	  	
	  	<!-- 尾页和下一页 -->
	  	<c:if test="${p.page<p.totalPages}">
	  		<c:url value="/search1" var="url"><c:param name="page" value="${p.page+1}"/><c:param name="pageSize" value="${p.pageSize}"/></c:url>
		    <li><a href="${url}">&gt;</a></li>
		    <c:url value="/search1" var="url"><c:param name="page" value="${p.totalPages}"/><c:param name="pageSize" value="${p.pageSize}"/></c:url>
		    <li><a href="${url}">&gt;|</a></li>
	  	</c:if>
	  	<c:if test="${p.page>=p.totalPages}">
	  		<li class="disabled"><a href="javascript:void(0)">&gt;</a></li>
	  		<li class="disabled"><a href="javascript:void(0)">&gt;|</a></li>
	  	</c:if>
	  </ul>
	</div>
	
	<div class="alert alert-info">总记录数${p.total} 总页数${p.totalPages}</div>
	
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
  </body>
</html>